JavaScript

Block Group: Browser API
Block Icon: JavaScript block icon

Executes JavaScript from specified files or URLs.

To configure a JavaScript block, you specify a path or URL to a JavaScript file and the name of an initialization function. The initialization function is executed once when the page is loaded. The initialization function must return a function, which is executed whenever the block is invoked. Typically, the block is invoked by an event that is bound to the block's Invoke property. The invoked function must take meta, getValue, and setValue as parameters. The meta parameter provides access to the block's parent component. For example, to change the background color, your Javascript can set meta.element.style.background to 'red'.

The following code outline shows the basic required routines.

	
function initJS() {
	console.log("Initialized!"); //Executed once when page is loaded
	function onInvoke(meta, getValue, setValue) {
		console.log("Invoked!");    //Executed whenever block's Invoke property is triggered,
	}
	return onInvoke;
}

The JavaScript function that is invoked can accept input and return output by means of added parameters. To add a parameter, click the plus sign located at the top right of the JavaScript block. To delete a parameter, right-click it in the right-hand panel of the dataflow window and select Remove Parameter.

You can bind these added properties to properties of other components to implement application logic that is driven by your JavaScript. In your JavaScript, use getValue and setValue to read and write parameter values. For example:

	
setValue('a', newValue);
getValue('a');

To create a blank JavaScript file for a JavaScript block, enter the desired file name and path in the block's scriptPath property and click the scriptData loadScript button. The scriptData dialog is displayed, preloaded with a code outline showing the required logic. Enter your code and click Apply to save it.

The JavaScript block differs from the Script block as follows:

Note: If you change the JavaScript code, you must refresh the browser to put your changes into effect.
Note: If you use JavaScript to access the Google Maps API, the map’s initialization timing can cause meta.gmap to be null. To prevent this problem, bind the onMapInit event in the map widget's Advanced properties to the Invoke property of the JavaScript block.

Input/Output Properties

These properties can take input and give output.

invoke loads the JavaScript in the global source for the page and runs the function returned by the init function.

autoRun specifies when the invoked function runs, as follows.

scriptPath specifies the path to the JavaScript file. It can be a Solution Builder file path relative to the root, or it can be a URL. The file extension must be .js.

initFunction specifies the name of the initialization function in the file.


Examples

The follow examples illustrate basic approaches to scripting using the JavaScript block.

Hello World

This example is based on a simple script that outputs a string, which can be bound to a text component.

Before you start, create a file that contains the following code and save it in your project folder as "test.js".

function initTestJs(){
	var count = 0;
	function onInvoke(meta, getValue, setValue){
		setValue('a', 'hello world ' + count++);
	}
	return onInvoke;
}

To implement this example, perform the following steps:

  1. Add a text component to the Stage and open its dataflow.
  2. Add a JavaScript block to the dataflow and set its properties as follows:
  3. Add a string property named "a" to the JavaScript block (click the "+" to add).
  4. Bind the JavaScript block's "a" property to the text component's Text property.
  5. Select the text component and display its Action tab. Click the expander and bind its onClick event to the JavaScript block's Invoke property.

Switch to Preview mode and verify that, when you click the text component, it displays the "Hello World" message and increments the counter.

Display a Marker on a Google Map Component

To add a marker in Australia on a Google Map component, add a JavaScript block to the dataflow of a Google Map component and configure it to call the following script. For the JavaScript bock's initFunction, specify initMapForDGLux.

function initMap(map) {
	var myLatLng = new google.maps.LatLng(-25.363, 131.044);
	var marker = new google.maps.Marker({
	position: myLatLng,
	map: map,
	title: 'Hello World!' });
}
			
function initMapForDGLux() {
	function runScript(meta, getValue, setValue) {
		if (meta.gmap != null) {
		initMap(meta.gmap);
		}
	}
	return runScript;	
}

Videos